<template>
  <div class="download-page"  v-wechat-title="this.title">
    <div class="mainPage">
     <div class="caption">
       <div class="split">
         <hr>
       </div>
       <div class="caption-name">听ta许久，终得相见</div>
       <div class="split">
          <hr>
       </div>
      </div>
      <div class="liveMsg">
         <div class="liveImg">
          <img src="@assets/images/liveImg.png" alt="">
         </div>
         <div class="liveName">听见广播</div>
      </div>
     <div class="downloadStore" @click="downLoad()">
        <!-- <button type="button"> -->
              <!-- <a :href="address"></a> -->

        <!-- </button> -->
     </div>
      
    </div>
    <div class="loadFooter">
    <div class="Mongolia" v-if="isWechat == '1'">
        <img src="@assets/images/toast.png" alt="">
    </div>  
    </div>
    
  </div>
</template>

<script>
import cbct from '@assets/js/common/base.js'
export default {
  name: 'pro-page',
  props: {
    msg: String,

  },
  data(){
    return{
     address:'',
     title:'打开下载听见广播APP',
     isWechat:'0'
    }
  },
   methods:{
     downLoad:function(){
        var u = navigator.userAgent, app = navigator.appVersion;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

        if (isAndroid) {
            var ua = navigator.userAgent.split("(")[1].split(")")[0];
            var phone = [/IPHONE/gi, /huawei/gi, /mi/gi, /vivo/gi, /OPPO/gi, /samsung/gi, /SONY/gi, /Nokia/gi, /HTC/gi, /ZTE/gi, /Lenovo/gi, /ZUK/gi,]
            if (phone[1].test(ua)) {
                window.location.href='https://appgallery.cloud.huawei.com/uowap/index.html#/detailApp/C100594819?source=appshare&subsource=C100594819';
            } else if (phone[2].test(ua)) {
                window.location.href='http://app.xiaomi.com/detail/760715';
            } else if (phone[3].test(ua)) {
                window.location.href='http://appdetailh5.vivo.com.cn/detail/2418329?source=7';
            } else if (phone[4].test(ua)) {
                window.location.href='http://appdetailh5.vivo.com.cn/detail/2418329?source=7';
            } else {
                var uas = navigator.userAgent.toLowerCase();
                if(uas.match(/MicroMessenger/i)=="micromessenger") {
                   this.isWechat = '1';
                }else{
                    window.location.href = 'http://img001.cbct.cn/package/SFM_M_A_S_cbct.apk';
                }
            }
        }
        if (isIOS) {
            window.location.href='https://apps.apple.com/us/app/id1439524045?ls=1';
        }
     },
  },
  created(){
    var u = navigator.userAgent, app = navigator.appVersion;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isAndroid) {
        this.address=cbct.androidDownloadAddress;
    }
    if (isIOS) {
        this.address=cbct.iosDownloadAddress;
    }
  }


}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mainPage{
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.caption{
  width: 100%;
  margin-top: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 0.24rem;
}
.split{
  flex-grow: 1;
}
.split hr{
/* width:1.91rem; */
height:0.01rem;
background:rgba(0,0,0,1);
opacity:0.55;
border: none;
border-top: 1px solid rgba(0,0,0,1);
}
.caption-name{
  min-width:2.68rem;
  padding: 0 0.26rem;
  height:0.31rem;
  font-size:0.3rem;
  /* font-family:PingFangSC-Regular; */
  font-weight:400;
 color:rgba(0,0,0,1);
  line-height:0.38rem;
  /* border: solid 1px; */
}
.liveMsg{
  width: 100%;
  text-align: center;
  /* background: darkgoldenrod; */
}
.liveImg{
  width:1.5rem;
  height:1.52rem;
  margin: 1.72rem auto 0.15rem;
}
.liveImg img{
  width: 100%;
  height: 100%;
}
.liveName{
  /* width:1.19rem; */
  height: 0.29rem;
  font-size:0.3rem;
  /* font-family:PingFangSC-Regular; */
  font-weight:400;
  color:rgba(51,51,51,1);
  line-height:0.38rem;
  margin: auto;
  /* background: darkcyan; */
}
.downloadStore{
  width:5.01rem;
  height:1.08rem;
  /* border: solid 1px; */
  margin: auto;
  margin-left: 1.25rem;
  margin-top: 1.97rem;
  
}
.downloadStore{
  display: inline-block;
  border: 0;
  border-radius:1rem;
  background: url(../assets/images/downloadStore.png) no-repeat;
  background-size: 100% 100%;

}
.loadFooter{
  width: 100%;
  height:1rem;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  box-shadow: 0.02rem 0 0.08rem rgba(221, 221,221,.6);
} 
.arrow-left{
  position: absolute;
  left:2.49rem;
  border: solid 1px;
}
.arrow-left>img,.arrow-right>img{ 
 width: 0.22rem;
 height: 0.38rem;
}
.arrow-right{
  position: absolute;
  right:2.57rem;
  border: solid 1px;
 
}
.Mongolia{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 100;
}
.Mongolia img{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    left: 1.3rem;
    width: 4.9rem;
}



</style>
